/*
 * @Descripttion: 
 * @version: 
 * @Author: kl2018
 * @Date: 2019-03-07 20:06:20
 * @LastEditors: kl2018
 * @LastEditTime: 2020-06-23 10:06:03
 */
import { WeaRichText, WeaFieldTemplateSelect } from 'ecCom';
import isFunction from 'lodash/isFunction';
class DocMouldRichText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      richValue: ''
    };
  }
  render() {
    let { richValue } = this.state;
    let { labelList, auth, needfieldSelect = true } = this.props;
    if (this.props.hasOwnProperty('richValue')) {
      richValue = this.props.richValue;
    }
    let _h1 = auth && auth.docdetachable == 1 ? 46 : 0;
    return (
      <div className="wea-doc-mould-rich-text" style={{ width: '100%', display: labelList ? 'table' : 'block' }}>
        <div className="wea-doc-mould-rich-text-left" style={{ display: labelList ? 'table-cell' : 'block', paddingRight: needfieldSelect ? 180 : 0 }}>
          <WeaRichText
            ls={true}
            value={richValue}
            ckConfig={{
              toolbar: [
                { name: 'document', items: ['Source'] },
                { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor'] },
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
              ],
              extraPlugins: 'autogrow',
              height: 490 - _h1,
              autoGrow_minHeight: 490 - _h1,
              autoGrow_maxHeight: 600,
              removePlugins: 'resize',
              uploadUrl: '/api/doc/upload/uploadFile',
              onToolsChange: this.onToolsChange
            }}
            ref="rich"
            extentsConfig
            className=""
            onChange={v => {
              this.setState({ richValue: v });
              isFunction(this.props.onChange) && this.props.onChange(v);
            }}
            onStatusChange={s => {
              if (s == 'ready') {
                this.focus();
              }
            }}
            onToolsChange={this.onToolsChange}
          />
        </div>
        {labelList && <div className="wea-doc-mould-rich-text-right-list">
          <WeaFieldTemplateSelect
            options={labelList}
            scrolledHeight={497 - _h1}
            ifAllowOnlyOneClick={false}
            onClick={(key) => {
              const richValue = this.refs.rich.props.value;
              this.refs.rich.insertHTML(key);
              this.setState({ richValue });
              isFunction(this.props.onChange) && this.props.onChange(richValue);
            }}
          />
        </div>}
      </div>
    );
  }
  focus = () => {
    this.refs.rich && this.refs.rich.focus('last');
  }
  onToolsChange = (type, ids, list, lev2Type) => {
    if (type === 'Upload' && lev2Type === 'image') {
      return list.map((item) => {
        return `<img src="${item.imgSrc}" onclick="ecCom.WeaRichText.playImg(this)"`
          + ` class="formImgPlay" data-imgsrc="${item.imgSrc}" />`;
      }).join("");
    }
    return '';
  }
}

export default DocMouldRichText;